<!-- 
*
* svg-icon 组件
*
 -->
 <template>
    <div class="container" v-if="count > pageSize && pageShow">
        <button :class="!initPageNumber ? 'isshow-left' : 'slide-left'" @click="currentChange(0)">
            <span>上一页</span>
            <div class="svg-wrapper-1">
                <div class="svg-wrapper">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    width="24"
                    height="24">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path
                    fill="currentColor"
                    d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
                    ></path>
                </svg>
                </div>
            </div>
        </button>
        <button :class="maxPageNumber ? 'isshow-right' : 'slide-right'" @click="currentChange(1)">
            <div class="svg-wrapper-1">
                <div class="svg-wrapper">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    width="24"
                    height="24">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path
                    fill="currentColor"
                    d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
                    ></path>
                </svg>
                </div>
            </div>
            <span>下一页</span>
        </button>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { throttle } from '@/utils/countdown-util';

const props = defineProps({
    // 总数
    count: {
        type: Number,
        default: 0
    },
    // 页码
    currentPage: {
        type: Number,
        default: 1
    },
    // 每页数量
    pageSize: {
        type: Number,
        default: 10
    },
    // 是否显示
    isShow: {
        type: Boolean,
        default: false
    }
});

// ========================= 计算属性 =========================
// 上一页按钮动画控制
const initPageNumber = computed(()=>{
    return props.currentPage !== 1;
})

// 下一页按钮动画控制
const maxPageNumber = computed(() => {
    return props.currentPage === Math.ceil(props.count/props.pageSize);
});

const currentPageNumber = computed(() => props.currentPage);

const pageShow = computed(() => props.isShow);

// ========================= 定义发射给父组件的方法 =========================
const emits = defineEmits();
// 翻页
function currentChange(isValue) {
    if(!throttle()) return ;
    let value = currentPageNumber.value;
    isValue ? value++ : value--;
    emits('currentChange', value);
};
</script>

<style lang="scss" scoped>
    @import '@/theme/animations';
    @import "./pagination.scss";
</style>